<template>
	<view>
		<!-- :tabHeight="45" -->
		<topbar>
			<view class="ml44 mr44">
				<view class="flex-align">
					<view class="mr30">
						<image :src="userInfo.uavatar || '/static/img/my/12.png'" mode=""
							style="width: 84rpx;height: 84rpx;border-radius: 50%;"></image>
					</view>
					<!-- v-show="show == 1" -->
					<view class="" @click="$pub.go('/pages/friendGroupAdd/friendGroupAdd')">
						<image src="/static/img/friendGroup/baseline-camera_enhance-24px.svg" mode=""
							style="width: 48rpx;height: 48rpx;"></image>
					</view>
				</view>
			</view>
			<!--  -->
			<!-- margin-top: -20rpx; -->
			<view class="" style="background-color: #fff;margin-top: -30rpx;">
				<view class="flex-cen">
					<view class="">
						<u-tabs duration="150" :list="list1" :current="currentTab" @change="tabsChange"
							lineColor="#A332FF" lineWidth="50" @click="click"></u-tabs>
					</view>
				</view>
			</view>
		</topbar>

		<view class="" style="padding-top: 200rpx;"></view>

		<!-- 		<view class="flex-cen" style="padding-top: 80px;">
			<view class=""><u-tabs :list="list1" lineColor="#A332FF" lineWidth="50" @click="click"></u-tabs></view>
		</view> -->

		<!-- style="height: 3500px;" -->
		<!-- style="height: 3500px;" -->

		<!-- 内容 -->
		<swiper class="swiper-box-list" :current="currentTab" @change="swiperChange" :style="{ height: swiperHeight }">
			<swiper-item class="swiper-topic-list" v-for="item in swiperDateList" :key="item.id">
				<view class="swiper-item">
					<!-- {{item}} -->
					<view class="item">
						<view class="ml24 mr30 mt14">
							<!-- 1 -->
							<view class="flex mt40" v-for="(i, index) in item.friendsCircle" :key="index">
								<view class="mr16">
									<image :src="i.userAvatar || '/static/img/friendGroup/8.svg'" mode=""
										style="width: 90rpx;height: 90rpx;"></image>
								</view>
								<view class="flex-column">
									<view class="flex-start" style="position: relative;">
										<view class="size_28 mr24 textover">{{ i.userNick || '默认用户' }}</view>
										<view style="width: 120rpx;" class="size_28 color_5E">
											{{ $u.timeFrom(i.ucreateTime, false) }}
										</view>
										<view class="" style="position: absolute;right: 0;">
											<image @click="deleteTrends(i.uactivityId)"
												src="/static/img/friendGroup/14.svg" mode=""
												style="width: 42rpx;height: 19rpx;"></image>
										</view>
									</view>
									<view class="flex-column mt10">
										<view class="size_24 color_1b">{{ i.utitle }}</view>
										<view class="size_24 color_5E">{{ i.uaddress || '-' }}</view>
									</view>
									<view class="mt20">
										<image :src="i.annexList[0] || '/static/img/friendGroup/45.svg'" mode=""
											style="width: 596rpx;height: 336rpx;"></image>
									</view>
									<view class="flex mt18">
										<view class="flex mr72 ml30">
											<!-- $u.debounce -->
											<view v-if="i.isLike === true" class=""
												hover-class="animate__animated  animate__bounceIn"
												@click="noLike(i.uactivityId)">
												<!-- red -->
												<u-icon name="heart-fill" color="#fb4e5d"></u-icon>
												<!-- <image class="" src="/static/img/friendGroup/17.svg" mode="" style="width: 43rpx;height: 38rpx;"></image> -->
											</view>
											<view v-if="i.isLike === false" class=""
												hover-class="animate__animated  animate__bounceIn"
												@click="like(i.uactivityId)">
												<!-- black -->
												<u-icon name="heart"></u-icon>
												<!-- <image class="" src="/static/img/friendGroup/17.svg" mode="" style="width: 43rpx;height: 38rpx;"></image> -->
											</view>
											<view class="ml10 size_24 color_5E">{{ i.ulikeNum }}</view>
										</view>
										<view class="flex mr60">
											<u-icon name="chat-fill"></u-icon>
											<view class="ml10 size_24 color_5E">512</view>
										</view>
										<button class="share" open-type="share">
											<view class="flex" @click="onShareAppMessage">
												<image src="/static/img/friendGroup/15.svg" mode=""
													style="width: 32rpx;height: 32rpx;"></image>
												<view class="ml10 size_24 color_5E">320</view>
											</view>
										</button>
									</view>
								</view>
							</view>
							<!-- 2 -->
							<view class="flex mt40" v-for="item in 2" :key="item">
								<view class="mr16">
									<image src="/static/img/friendGroup/8.svg" mode=""
										style="width: 90rpx;height: 90rpx;"></image>
								</view>
								<view class="flex-column">
									<view class="flex-start ">
										<view class="size_28 mr24">君君</view>
										<view class="size_28 color_5E mr300">30 min ago</view>
										<view class="">
											<image src="/static/img/friendGroup/14.svg" mode=""
												style="width: 42rpx;height: 19rpx;"></image>
										</view>
									</view>
									<view class="flex-column">
										<view class="size_24">going to tell the kids that this was the best game back in
											the day</view>
									</view>
									<view class="row flex-cen mt18">
										<view class="mr10 ">
											<image src="/static/img/addCc/Container.png" mode=""
												style="width: 68rpx;height: 68rpx;"></image>
										</view>
										<view class="flex-column mr22">
											<view class="flex">
												<view class="size_22 mr16">健身 跑步</view>
												<view class="size_18 color_5E">(10/30)</view>
											</view>
											<view class="flex mt4">
												<view class="size_18 mr30">铜鼓路附近</view>
												<view class="size_18">>400m 南山</view>
											</view>
											<view class="size_14 color_FF mt8">找几个志同道合的附近朋友一起跑步</view>
										</view>
										<view class="row1 flex-cen">
											<view class="flex">
												<u-icon name="plus" color="#fff" size="8"></u-icon>
												<view class="ml8 size_12 color_fff">加入</view>
											</view>
										</view>
									</view>
									<view class="flex mt18">
										<view class="flex mr72 ml30">
											<view class="" hover-class="animate__animated  animate__bounceIn">
												<image class="" src="/static/img/friendGroup/17.svg" mode=""
													style="width: 43rpx;height: 38rpx;"></image>
											</view>
											<view class="ml10 size_24 color_5E">452</view>
										</view>
										<view class="flex mr60">
											<u-icon name="chat-fill"></u-icon>
											<view class="ml10 size_24 color_5E">512</view>
										</view>
										<view class="flex">
											<image src="/static/img/friendGroup/15.svg" mode=""
												style="width: 46rpx;height: 37rpx;"></image>
											<view class="ml10 size_24 color_5E">320</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>

		<!-- 废弃 -->
		<scroll-view scroll-y="true" style="height: 1500rpx;display: none;">
			<view>
				<!-- 				<view class="line"></view> -->
				<!-- tip -->
				<u-toast ref="uToast">
					<view class="u-slot-wrap">12312</view>
				</u-toast>

				<!-- 推荐动态 -->
				<view class="ml24 mr30 mt14" v-if="show == 0">
					<!-- 1 -->
					<view class="flex mt40" v-for="(item, index) in 6" :key="index">
						<view class="mr16">
							<image :src="item.userAvatar || '/static/img/friendGroup/8.svg'" mode=""
								style="width: 90rpx;height: 90rpx;"></image>
						</view>
						<view class="flex-column">
							<view class="flex-start">
								<view class="size_28 mr24">{{ item.userNick || '默认用户' }}</view>
								<view class="size_28 color_5E mr300">{{ $u.timeFrom(item.ucreateTime, false) }}</view>
								<view class="">
									<image src="/static/img/friendGroup/14.svg" mode=""
										style="width: 42rpx;height: 19rpx;"></image>
								</view>
							</view>
							<view class="flex-column mt10">
								<view class="size_24 color_1b">{{ item.utitle }}</view>
								<view class="size_24 color_5E">定位：南山科技大厦附近</view>
							</view>
							<view class="mt20">
								<image :src="item.annexList[0] || '/static/img/friendGroup/45.svg'" mode=""
									style="width: 596rpx;height: 336rpx;"></image>
							</view>
							<view class="flex mt14">
								<view class="flex mr72 ml30">
									<!-- $u.debounce -->
									<view class="" hover-class="animate__animated  animate__bounceIn">
										<!-- red -->
										<u-icon name="heart-fill" color="#fb4e5d"></u-icon>
									</view>
									<view class="ml10 size_24 color_5E">{{ item.ulikeNum }}</view>
								</view>
								<view class="flex mr60">
									<u-icon name="chat-fill"></u-icon>
									<view class="ml10 size_24 color_5E">512</view>
								</view>
								<view class="flex">
									<image src="/static/img/friendGroup/15.svg" mode=""
										style="width: 46rpx;height: 37rpx;"></image>
									<view class="ml10 size_24 color_5E">320</view>
								</view>
							</view>
						</view>
					</view>
					<!-- 2 -->
					<view class="flex mt40">
						<view class="mr16">
							<image src="/static/img/friendGroup/8.svg" mode="" style="width: 90rpx;height: 90rpx;">
							</image>
						</view>
						<view class="flex-column">
							<view class="flex-start ">
								<view class="size_28 mr24">君君</view>
								<view class="size_28 color_5E mr300">30 min ago</view>
								<view class="">
									<image src="/static/img/friendGroup/14.svg" mode=""
										style="width: 42rpx;height: 19rpx;"></image>
								</view>
							</view>
							<view class="flex-column">
								<view class="size_24">going to tell the kids that this was the best game back in the day
								</view>
							</view>
							<view class="row flex-cen mt18">
								<view class="mr10 ">
									<image src="/static/img/addCc/Container.png" mode=""
										style="width: 68rpx;height: 68rpx;"></image>
								</view>
								<view class="flex-column mr22">
									<view class="flex">
										<view class="size_22 mr16">健身 跑步</view>
										<view class="size_18 color_5E">(10/30)</view>
									</view>
									<view class="flex mt4">
										<view class="size_18 mr30">铜鼓路附近</view>
										<view class="size_18">>400m 南山</view>
									</view>
									<view class="size_14 color_FF mt8">找几个志同道合的附近朋友一起跑步</view>
								</view>
								<view class="row1 flex-cen">
									<view class="flex">
										<u-icon name="plus" color="#fff" size="8"></u-icon>
										<view class="ml8 size_12 color_fff">加入</view>
									</view>
								</view>
							</view>
							<view class="flex mt18">
								<view class="flex mr72 ml30">
									<view class="" hover-class="animate__animated  animate__bounceIn">
										<image class="" src="/static/img/friendGroup/17.svg" mode=""
											style="width: 43rpx;height: 38rpx;"></image>
									</view>
									<view class="ml10 size_24 color_5E">452</view>
								</view>
								<view class="flex mr60">
									<u-icon name="chat-fill"></u-icon>
									<view class="ml10 size_24 color_5E">512</view>
								</view>
								<view class="flex">
									<image src="/static/img/friendGroup/15.svg" mode=""
										style="width: 46rpx;height: 37rpx;"></image>
									<view class="ml10 size_24 color_5E">320</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!--朋友圈 -->
				<view class="ml24 mr30 mt14" v-if="show == 1">
					<!-- 1 -->
					<view class="flex mt40" v-for="(i, index) in 5" :key="index">
						<view class="mr16">
							<image :src="i.userAvatar" mode="" style="width: 90rpx;height: 90rpx;"></image>
						</view>
						<view class="flex-column">
							<view class="flex-start">
								<view class="size_28 mr24">{{ i.userNick || '默认用户' }}</view>
								<view class="size_28 color_5E mr300">{{ $u.timeFrom(i.ucreateTime, false) }}</view>
								<view class="">
									<image src="/static/img/friendGroup/14.svg" mode=""
										style="width: 42rpx;height: 19rpx;"></image>
								</view>
							</view>
							<view class="flex-column mt10">
								<view class="size_24">{{ i.utitle }}</view>
								<view class="size_24 color_5E">定位：南山科技大厦附近</view>
							</view>
							<view class="mt20">
								<image :src="i.annexList[0] || '/static/img/friendGroup/45.svg'" mode=""
									style="width: 596rpx;height: 336rpx;"></image>
							</view>
							<view class="flex mt14">
								<view class="flex mr72 ml30">
									<!-- $u.debounce -->
									<view v-if="i.isLike === true" class=""
										hover-class="animate__animated  animate__bounceIn"
										@click="noLike(i.uactivityId)">
										<!-- red -->
										<u-icon name="heart-fill" color="#fb4e5d"></u-icon>
										<!-- <image class="" src="/static/img/friendGroup/17.svg" mode="" style="width: 43rpx;height: 38rpx;"></image> -->
									</view>
									<view v-if="i.isLike === false" class=""
										hover-class="animate__animated  animate__bounceIn" @click="like(i.uactivityId)">
										<!-- black -->
										<u-icon name="heart"></u-icon>
										<!-- <image class="" src="/static/img/friendGroup/17.svg" mode="" style="width: 43rpx;height: 38rpx;"></image> -->
									</view>
									<view class="ml10 size_24 color_5E">{{ i.ulikeNum }}</view>
								</view>
								<view class="flex mr60">
									<u-icon name="chat-fill"></u-icon>
									<view class="ml10 size_24 color_5E">512</view>
								</view>
								<view class="flex">
									<image src="/static/img/friendGroup/15.svg" mode=""
										style="width: 32rpx;height: 32rpx;"></image>
									<view class="ml10 size_24 color_5E">320</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>

		<view class=""></view>
		<tabbar></tabbar>
		<view class=""></view>
	</view>
</template>

<script>
	import {
		debounce
	} from '@/utils/lodash.js';
	import {
		mapState, //先导入mapState方法
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				list1: [{
						name: '为你推荐',
						id: 0
					},
					{
						name: '朋友圈',
						id: 1
					}
				],
				show: '',

				currentTab: 0,
				// Tab切换内容
				swiperDateList: [{
						id: 1,
						content: '为你推荐',
						recommendationlist: []
					},
					{
						id: 2,
						content: '朋友圈',
						friendsCircle: []
					}
				],
				time: null,
				timestamp: '1678498191818',

				aId: '',
				/*  */
				swiperHeight: ''
			};
		},
		computed: {
			...mapState('user', ['userInfo'])
		},
		onReady() {
			this.showToast();
		},
		// mounted() {
		// 	this.getFriendGroupList();
		// },
		onLoad() {
			this.time = uni.$u.timeFrom(this.timestamp);
		},
		onShow() {
			this.getScreenHeight();
			// this.getRecommendationList();
			this.getFriendGroupList();
		},
		onShareAppMessage(res) {
			console.log(res, "res");
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '自定义分享标题',
				path: '/pages/share/share'
			}
		},
		methods: {
			getScreenHeight() {
				var that = this;
				uni.getSystemInfo({
					success: res => {
						that.swiperHeight = (res.screenHeight - 100) * 2 + 'rpx';
					}
				});
			},

			click(item) {
				// console.log('item', item);
				this.currentTab = item.index;
				this.show = item.index;
			},
			tabsChange(e) {},
			swiperChange(e) {
				this.currentTab = e.detail.current;
			},

			addClass() {},
			async likeDe(id) {
				let re = await this.$API.trendsApi.like(this.aId);
				// this.getRecommendationList();
				this.getFriendGroupList();
			},
			async noLikeDe(id) {
				let re = await this.$API.trendsApi.noLike(this.aId);
				// this.getRecommendationList();
				this.getFriendGroupList();
			},
			/* yes */
			async like(id) {
				this.aId = id;
				try {
					console.log('like');
					uni.$u.throttle(this.likeDe, 1500);
				} catch (e) {
					console.log(e, 'err');
				}
			},
			/* no */
			async noLike(id) {
				this.aId = id;
				try {
					console.log('noLike');
					uni.$u.throttle(this.noLikeDe, 1500);
				} catch (e) {
					console.log(e, 'err');
				}
			},
			/* 删除 */
			async deleteTrends(id) {
				let re = await this.$API.trendsApi.deleteTrends(id);
				// this.getRecommendationList();
				this.getFriendGroupList();
			},
			async getRecommendationList() {
				try {
					let re = await this.$API.trendsApi.recommendActivity();
					this.swiperDateList[0].recommendationlist = re;
				} catch (e) {
					console.log(e, 'err');
				}
			},
			async getFriendGroupList() {
				try {
					// let re = await this.$api.get('/activity/activityApi/list/page/user');
					// this.friendGroupList = re.data.rows;
					let re = await this.$API.trendsApi.getFriendCircleActivity();
					this.swiperDateList[1].friendsCircle = re;
				} catch (e) {
					console.log(e, 'err');
				}
			},
			// async getFriendGroupList_MyFriend() {
			// 	try {
			// 		let re = await this.$API.trendsApi.getMyActivity();
			// 		this.myFriendGroupList = re;
			// 	} catch (e) {
			// 		console.log(e, 'err');
			// 	}
			// },
			showToast(params) {
				this.$refs.uToast.show({
					title: '登录成功',
					type: 'success',
					position: 'top',
					message: '更新'
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	button::after {
		border: none;
	}

	button {
		position: relative;
		display: block;
		margin-left: auto;
		margin-right: auto;
		padding-left: 0px;
		padding-right: 0px;
		box-sizing: border-box;
		// font-size: 18px;
		text-align: center;
		text-decoration: none;
		// line-height: 1;
		line-height: 1.35;
		// border-radius: 5px;
		-webkit-tap-highlight-color: transparent;
		overflow: hidden;
		color: #000000;
		background-color: #fff;
		width: 100%;
		height: 100%;
	}

	.share {
		border: none;
		background: white;
	}


	swiper-item {
		overflow: auto !important;
	}

	// ::v-deep .u-tabs__wrapper__nav {
	// 	justify-content: space-between !important;
	// }

	::v-deep .u-tabs__wrapper__nav__item {
		padding: 0 60px !important;
	}

	::v-deep .u-tabs__wrapper__nav__line {
		// transform: translate(185.5px);
		// transform: translate(60px) !important;
	}

	.row {
		width: 454rpx;
		height: 132rpx;
		background: #f8f2ff;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		opacity: 1;
	}

	.row1 {
		width: 88rpx;
		height: 46rpx;
		background: #a054fe;
		border-radius: 42rpx 42rpx 42rpx 42rpx;
		opacity: 1;
	}
</style>